<template>
  <div class="dialog-form">
    <el-form ref="channelRef" :model="form" :rules="rules" label-width="80px">
      <el-row :gutter="36">
        <el-col :span="12">
          <el-form-item label="渠道名称" prop="channelName">
            <el-input v-model="form.channelName" placeholder="请输入渠道名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户端" prop="channelType">
            <el-select v-model="form.channelType" placeholder="请选择" @change="handleChannelType">
              <el-option
                v-for="item in bus_channel_code"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商户号" prop="channelMchId">
            <el-input v-model="form.channelMchId" placeholder="请输入商户号，只支持英文和数字" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="AppID" prop="channelAppId">
            <el-input v-model="form.channelAppId" placeholder="请输入AppID，只支持英文和数字" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="应用状态" prop="enabled" required>
            <el-switch
              v-model="form.enabled"
              inline-prompt
              :active-value="1"
              :inactive-value="2"
              inactive-text="禁用"
              active-text="启用"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>

<script setup>
import { getChannel, addChannel, updateChannel } from "@/api/channel/platchannelinfo"

const { proxy } = getCurrentInstance()
const { bus_channel_code } = proxy.useDict("bus_channel_code")

const emits = defineEmits(['cancel', 'confirm'])

const channelRef = ref()
const showConfirmModel = ref(false)
const form = ref({
  id: null,
  channelName: null,
  enabled: 1,
  channelType: null,
  channelCode: null,
  channelAppId: null,
  channelMchId: null
})
const rules = {
  channelName: [
    { required: true, message: "渠道名称不能为空", trigger: "blur" }
  ],
  channelType: [
    { required: true, message: "客户端不能为空", trigger: "blur" }
  ],
  channelMchId: [
    { required: true, message: "商户号不能为空", trigger: "blur" },
    { pattern: /^[A-Za-z0-9]+$/, message: "商户号格式不正确，只支持英文和数字", trigger: "blur" }
  ],
  channelAppId: [
    { required: true, message: "AppID不能为空", trigger: "blur" },
    { pattern: /^[A-Za-z0-9]+$/, message: "AppID格式不正确，只支持英文和数字", trigger: "blur" }
  ]
}

const pageInit = (id) => {
  if (id) {
    getChannel(id).then(response => {
      form.value = response.data
    })
  }
}

// 修改客户端
const handleChannelType = (val) => {
  if (form.value.id) {
    showConfirmModel.value = true
  }
}

const onCancel = () => {
  emits('cancel')
}

const onConfirm = () => {
  channelRef.value.validate(valid => {
    if (valid) {
      if (showConfirmModel.value) {
        proxy.$modal.confirm('修改渠道客户端后，配置信息和密钥信息将重置，是否确认修改？').then(function() {
          submit()
        }).catch(() => {})
      } else {
        submit()
      }
    }
  })
}

const submit = () => {
  if (form.value.id) {
    updateChannel(form.value).then(response => {
      proxy.$modal.msgSuccess("修改成功")
      channelRef.value.resetFields()
      emits('confirm')
    })
  } else {
    addChannel(form.value).then(response => {
      proxy.$modal.msgSuccess("新增成功")
      channelRef.value.resetFields()
      emits('confirm')
    })
  }
}

defineExpose({
  pageInit
})

</script>

<style lang="scss" scoped>

</style>